<template>
  <div>
    <a-map v-if='isLoaded' :zoom='zoom' :center='center'>
      <a-marker :position='position' :draggable='true' @position-change='onPositionChange'></a-marker>
    </a-map>
  </div>
</template>

<script>
import VueAMap from 'vue-amap'

VueAMap.initAMapApiLoader({
  key: '904322f93174c99961143da9bf18b50b',
  plugin: ['AMap.MouseTool', 'AMap.PolyEditor'],
  // 高德 SDK 版本号
  v: '1.4.15',
  uiVersion: '1.0'
})
export default {
  data() {
    return {
      isLoaded: false,
      zoom: 13,
      center: [116.397428, 39.90923],
      position: [116.397428, 39.90923],
      path: []
    }
  },
  mounted() {
    this.isLoaded = true
  },
  methods: {
    onPositionChange(e) {
      const position = e.target.getPosition()
      this.path.push(position)
      this.drawPath()
    },
    drawPath() {
      if (this.path.length >= 2) {
        if (!this.polyline) {
          this.polyline = new AMap.Polyline({
            map: this.$refs.map.map,
            path: this.path,
            strokeColor: '#FF33FF',
            strokeWeight: 6
          })
        } else {
          this.polyline.setPath(this.path)
        }
      }
    }
  }
}
</script>
